<template>
    <transition
            name="tran_rank"
            enter-active-class="animated fadeIn"
            leave-active-class="animated fadeOut"
    >
        <div class="breadcrumb" v-if="show">
            <el-card class="box-card">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item @click="fresh">首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-for="item in items" :key="item">{{item}}</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </div>
    </transition>
</template>

<script>
    export default{
        props:['bus'],
        name: 'breadcrumb',
        data () {
            return {
                msg: 'breadcrumb',
                show:false,
                items:[],
            }
        },
        methods:{
            init:function (breads) {
                this.items = breads
                if(this.items.length == 0){
                    this.show = false
                }else{
                    this.show = true
                }
            },
            fresh:function () {
                this.show = false
            }
        },
        mounted:function () {
            this.bus.$on('sendBread',this.init)
        }
    }
</script>

<style>
    .breadcrumb{
       margin-bottom: 20px;
    }
</style>